<template>
  <label @click.stop>
    <el-checkbox-group v-model="valueModel" @change="onchange">
      <el-checkbox v-for="(item, idx) in opts" :key="idx"
                   :label="item.label" :value="item.value"></el-checkbox>
    </el-checkbox-group>
    <span v-if="validation" v-show="validation.valid === false" class="sea-form-error">{{ validation.message }}</span>
  </label>
</template>

<script setup lang="ts">
import {UseDictionary, useDictionary} from "@/widget/use/use-dictionary";
import {useValueModel, useValidator, UseValueModel} from "@/widget/data-table/use-value-model";

/**
 * 复选框
 */
interface Props extends /* @vue-ignore */ UseDictionary, /* @vue-ignore */UseValueModel {
    // 字段名
    property: string
    // 行级数据
    row: Record<string, any>
    // 默认值（单向输入，需要通过 change 事件侦听变化）
    value?: number[] | string[]
    // 数据变化事件
    change?: ModifiedMethod

    // 是否可清除
    clearable?: boolean
    // 文字提示
    placeholder?: string

    /** 数据字典配置 */
    options: DictionaryItem[] | string
    // 请求参数
    where?: Record<string, any>
    // 异步获取函数
    provider?: DictionaryQuery
}

const props = withDefaults(defineProps<Props>(), {
    placeholder: '请选择',
    clearable: true
})

const {valueModel, onchange} = useValueModel(props);

const {opts, loading} = useDictionary(props);

const {validation} = useValidator(props);

</script>